<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 三石影视</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-inter text-dark">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <!-- logo -->
            <a href="/" class="flex-shrink-0 flex items-center space-x-1 z-10">
                <i class="fa fa-play-circle text-primary text-3xl"></i>
                <span class="text-xl font-bold text-primary">三石影视</span>
            </a>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="{{ url_for('index') }}" class="font-medium text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="{{ url_for('category_movie') }}" class="font-medium text-gray-600 hover:text-primary transition-colors">电影</a>
                <a href="{{ url_for('category_tv') }}" class="font-medium text-gray-600 hover:text-primary transition-colors">电视剧</a>
                <a href="{{ url_for('category_anime') }}" class="font-medium text-gray-600 hover:text-primary transition-colors">动漫</a>
                <a href="{{ url_for('category_variety') }}" class="font-medium text-gray-600 hover:text-primary transition-colors">综艺</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <form method="get" action="/">
                        <input type="text" name="q" value="{{ search_query|default('') }}" placeholder="搜索视频..." class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/50 w-64">
                        <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"><i class="fa fa-search"></i></button>
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </form>
                </div>
                <button class="md:hidden text-gray-600">
                    <i class="fa fa-search text-xl"></i>
                </button>
                {% if session.get('user_id') %}
                <div class="relative">
                    <button id="userMenuBtn" class="text-gray-600 hover:text-primary transition-colors">
                        <i class="fa fa-user-circle text-xl"></i>
                    </button>
                    <div id="userMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden">
                        <a href="{{ url_for('profile') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-user mr-2"></i>个人中心
                        </a>
                        {% if session.get('role') == 'admin' %}
                        <a href="{{ url_for('admin_dashboard') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-cog mr-2"></i>管理控制台
                        </a>
                        {% endif %}
                        <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                            <i class="fa fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
                {% else %}
                <a href="{{ url_for('login') }}" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-user-circle text-xl"></i>
                </a>
                {% endif %}
                <button class="md:hidden text-gray-600">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- 用户信息卡片 -->
                <div class="p-8 border-b border-gray-100">
                    <div class="flex items-center space-x-6">
                        <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fa fa-user text-4xl text-gray-400"></i>
                        </div>
                        <div>
                            <h2 class="text-2xl font-bold mb-2">{{ session.get('username') }}</h2>
                            <p class="text-gray-500">{% if session.get('role') == 'admin' %}管理员{% else %}普通会员{% endif %}</p>
                        </div>
                    </div>
                </div>
                
                <!-- 功能导航 -->
                <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100">
                    <a href="#watch-history" class="p-6 text-center hover:bg-gray-50 transition-colors">
                        <i class="fa fa-history text-2xl text-primary mb-3"></i>
                        <h3 class="font-medium">观看历史</h3>
                        <p class="text-sm text-gray-500 mt-1">查看您的观看记录</p>
                    </a>
                    <a href="#favorites" class="p-6 text-center hover:bg-gray-50 transition-colors">
                        <i class="fa fa-heart text-2xl text-primary mb-3"></i>
                        <h3 class="font-medium">我的收藏</h3>
                        <p class="text-sm text-gray-500 mt-1">查看您收藏的视频</p>
                    </a>
                    <a href="#settings" class="p-6 text-center hover:bg-gray-50 transition-colors">
                        <i class="fa fa-cog text-2xl text-primary mb-3"></i>
                        <h3 class="font-medium">账号设置</h3>
                        <p class="text-sm text-gray-500 mt-1">管理您的账号信息</p>
                    </a>
                </div>
            </div>
            
            <!-- 观看历史 -->
            <div id="watch-history" class="mt-8">
                <h3 class="text-xl font-bold mb-4">观看历史</h3>
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div id="history-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 历史记录将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
            
            <!-- 我的收藏 -->
            <div id="favorites" class="mt-8">
                <h3 class="text-xl font-bold mb-4">我的收藏</h3>
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div id="favorites-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 收藏内容将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
            
            <!-- 账号设置 -->
            <div id="settings" class="mt-8">
                <h3 class="text-xl font-bold mb-4">账号设置</h3>
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <form method="post" action="{{ url_for('update_password') }}" class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                            <input type="text" value="{{ session.get('username') }}" disabled
                                   class="w-full px-4 py-2 rounded-lg border border-gray-300 bg-gray-50">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                            <input type="email" value="user@example.com" disabled
                                   class="w-full px-4 py-2 rounded-lg border border-gray-300 bg-gray-50">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">修改密码</label>
                            <input type="password" name="new_password" placeholder="输入新密码"
                                   class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">确认新密码</label>
                            <input type="password" name="confirm_password" placeholder="再次输入新密码"
                                   class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                        </div>
                        <button type="submit"
                                class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors">
                            保存修改
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加提示框 -->
    <div id="toast" class="fixed top-4 right-4 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-[-100%] opacity-0 transition-all duration-300">
        <span id="toast-message"></span>
    </div>

    <script>
        // 显示提示框
        function showToast(message) {
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toast-message');
            toastMessage.textContent = message;
            toast.style.transform = 'translateY(0)';
            toast.style.opacity = '1';
            setTimeout(() => {
                toast.style.transform = 'translateY(-100%)';
                toast.style.opacity = '0';
            }, 3000);
        }

        // 加载观看历史
        function loadHistory() {
            fetch('/get_history')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const historyList = document.getElementById('history-list');
                        if (data.videos.length === 0) {
                            historyList.innerHTML = '<p class="text-gray-500 text-center col-span-full py-8">暂无观看记录</p>';
                            return;
                        }
                        historyList.innerHTML = data.videos.map(video => `
                            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                                <div class="relative">
                                    <img src="${video.cover}" alt="${video.title}" class="w-full h-48 object-cover">
                                    <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <a href="/play/${video.id}" class="bg-primary/90 text-white rounded-full w-14 h-14 flex items-center justify-center transform hover:scale-110 transition-transform">
                                            <i class="fa fa-play text-xl"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="p-4">
                                    <h3 class="font-semibold text-lg mb-2 line-clamp-1">${video.title}</h3>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <span class="mr-3"><i class="fa fa-star mr-1"></i>${video.rating}</span>
                                        <span><i class="fa fa-eye mr-1"></i>${video.views}万</span>
                                    </div>
                                </div>
                            </div>
                        `).join('');
                    }
                });
        }

        // 加载收藏
        function loadFavorites() {
            fetch('/get_favorites')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const favoritesList = document.getElementById('favorites-list');
                        if (data.videos.length === 0) {
                            favoritesList.innerHTML = '<p class="text-gray-500 text-center col-span-full py-8">暂无收藏内容</p>';
                            return;
                        }
                        favoritesList.innerHTML = data.videos.map(video => `
                            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                                <div class="relative">
                                    <img src="${video.cover}" alt="${video.title}" class="w-full h-48 object-cover">
                                    <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <a href="/play/${video.id}" class="bg-primary/90 text-white rounded-full w-14 h-14 flex items-center justify-center transform hover:scale-110 transition-transform">
                                            <i class="fa fa-play text-xl"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="p-4">
                                    <h3 class="font-semibold text-lg mb-2 line-clamp-1">${video.title}</h3>
                                    <div class="flex items-center text-sm text-gray-500">
                                        <span class="mr-3"><i class="fa fa-star mr-1"></i>${video.rating}</span>
                                        <span><i class="fa fa-eye mr-1"></i>${video.views}万</span>
                                    </div>
                                </div>
                            </div>
                        `).join('');
                    }
                });
        }

        // 页面加载时加载数据
        document.addEventListener('DOMContentLoaded', function() {
            loadHistory();
            loadFavorites();
        });

        // 用户菜单显示/隐藏
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        if (userMenuBtn && userMenu) {
            userMenuBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                userMenu.classList.toggle('hidden');
            });
            
            // 点击其他地方关闭菜单
            document.addEventListener('click', function(e) {
                if (!userMenu.contains(e.target) && !userMenuBtn.contains(e.target)) {
                    userMenu.classList.add('hidden');
                }
            });
        }
    </script>
</body>
</html> 